<template>
  <div class="upload-video-wrap">
    <a-upload
      ref="upload"
      :before-upload="beforeUpload"
      :custom-request="customRequest"
    >
      <div class="choose-wrap" v-if="!videoUrl">
        <div class="upload-icon">
          <a-icon type="cloud-upload" />
        </div>
        <a-button class="btn" >
          <a-icon type="upload" /> 选择视频
        </a-button>   
      </div>
      <div class="video-wrap" v-else>
        <video :src="videoUrl" controls autoplay></video>
      </div>
    </a-upload>
    <div class="title-wrap">
      <a-input v-model="title" placeholder="标题" />
    </div>
    <div class="areas-wrap">
      <a-select
        mode="multiple"
        style="width: 100%"
        placeholder="选择所属的领域"
        v-model="chooseAreas"
      >
        <a-select-option v-for="item in areas" :key="item.id">
          {{ item.name }}
        </a-select-option>
      </a-select>
    </div>
    <div class="op-btn">
      <a-button @click="canclePublish">取消</a-button>
      <a-button @click="confirmPublish" type="primary">发布</a-button>
    </div>
  </div>
</template>

<script>
import {uploadVideo,getAreas,publish} from '@/api/request'
import {getCurrentTime} from '@/assets/js/getTime'
export default {
  name: 'uploadVideo',
  components: {

  },
  data(){
    return{
      videoUrl:'',
      chooseAreas:[],
      areas:[],
      title:''
    }
  },
  methods:{
    handleGetAreas(){
      getAreas().then(res=>{
        if(res.data.status===0){
          this.areas=res.data.data
        }
      })
    },
    beforeUpload(file) {
      const isVideo = file.type.startsWith('video/');
      if (!isVideo) {
        this.$message.error('只能上传视频文件！');
        return false;
      }
      const isLt100M = file.size / 1024 / 1024 < 100;
      if (!isLt100M) {
        this.$message.error('视频文件大小不能超过100MB！');
        return false;
      }
    },
    customRequest({file}){
      let formData = new FormData();
      formData.append("file", file);
      uploadVideo(formData).then(res=>{
        // console.log(res)
        if(res.data.status===0){
          this.videoUrl='http://localhost:3007/uploads/'+res.data.url
          this.$message.success('上传成功！')
        }else {
          this.$message.error('上传失败！')
          this.videoUrl=''
        }
      })
    },
    canclePublish(){
      this.videoUrl='',
      this.title=''
      this.chooseAreas=[]
    },
    confirmPublish(){
      if(!this.title){
        this.$message.error('未填写标题！')
      }
      else if(!this.videoUrl){
        this.$message.error('未上传视频！')
        return
      }else if(this.chooseAreas.length===0){
        this.$message.error('未选择所属领域！')
        return
      }
      const obj={
        title:this.title,
        content:this.videoUrl,
        time:getCurrentTime(),
        type:"0",
        areas:JSON.stringify(this.chooseAreas)
      }
      publish(obj).then(res=>{
        console.log(res,'res')
        if(res.data.status===0){
          this.$message.success('发布成功！')
          this.canclePublish()
        }
        else{
          this.$message.error('发布失败！')
        }
      })
    }
  },
  mounted(){
    this.handleGetAreas()
  }
}
</script>

<style scoped lang="less">
.upload-video-wrap
{
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 77px );
  flex-direction: column;
  /deep/ .ant-upload-list-text{
    display: none;
  }
  .title-wrap,.areas-wrap{
    margin-top: 20px;
    width: 200px;
  }
  .op-btn{
    margin-top: 20px;
    width: 150px;
    display: flex;
    justify-content: space-between;
  }
}
.choose-wrap{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .upload-icon{
    font-size: 200px;
    position: absolute;
  }
  .btn{
    margin-top: 240px;
  }
}
</style>
